<template>
	<!-- 促销优惠活动 -->
  <view class="container">
    <view class="card-item" v-for="(item, index) in serviceItems" :key="index" @click="goDetails">
      <image class="card-image" src="../../static/logo.png" alt="Service Image"></image>
      <view class="card-info">
        <view class="card-header">
          <text class="card-title">{{item.title}}</text>
          <view class="badge">{{item.doctor}}</view>
        </view>
        <view class="card-subtitle">{{item.duration}}</view>
        <view class="price-info">
          <view class="current-price">
			  <text class="_text">￥</text>
			  <text class="__text">{{item.currentPrice}}</text>
		  </view>
          <view class="original-price">{{item.originalPrice}}</view>
        </view>
      </view>
	  <view class="book">
	  	去预约
	  </view>
    </view>
	<view class="line">
		<u-loadmore loadmoreText="已加载全部数据" color="#D5DBD0" fontSize="30" lineColor="#D5DBD0" :dashed="false" line />
	</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 若有需要的数据，可以在此定义或请求
	  serviceItems: [
	          {
	            imageUrl: '../../static/logo.png',
	            title: '按摩 脊柱侧弯 正骨调理',
	            doctor: '鲍医师',
	            duration: '60分钟',
	            currentPrice: '598',
	            originalPrice: '￥7176'
	          },
	          {
	            imageUrl: '../../static/logo.png',
	            title: '全身刮痧',
	            doctor: '锦秋',
	            duration: '90分钟',
	            currentPrice: '888',
	            originalPrice: '￥9999'
	          },
	          {
	            imageUrl: '../../static/logo.png',
	            title: '艾灸治疗',
	            doctor: '王医师',
	            duration: '90分钟',
	            currentPrice: '888',
	            originalPrice: '￥9999'
	          },
	        ]
    };
  },
  methods:{
	  goDetails(){
		  uni.navigateTo({
		  	url: '/pages/activity/details'
		  });
	  }
  }
};
</script>

<style lang="less" scoped>
.container {
  padding: 20rpx;
}
.line{
		margin-top: 42rpx;
	}
.card-item {
display: flex;
width: 720rpx;
height: 216rpx;
background: #FFFFFF;
border-radius: 20rpx;
border: 1rpx solid #F2EEEE;
position: relative;
margin-bottom: 20rpx;
}

.card-image {
  width: 172rpx;
  height: 172rpx;
  border-radius: 15rpx;
  margin-right: 20rpx;
  margin-top: 20rpx;
  margin-left: 22rpx;
}

.card-info {
  flex: 1;
}
.book{
	position: absolute;
	width: 126rpx;
	height: 58rpx;
	background: #C19C55;
	border-radius: 6rpx;
	font-weight: 400;
	font-size: 28rpx;
	color: #FFFFFF;
	text-align: center;
	line-height: 58rpx;
	bottom: 22rpx;
	right: 20rpx;
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.card-title {
height: 28rpx;
font-family: SourceHanSansCN, SourceHanSansCN;
font-weight: 500;
font-size: 28rpx;
color: #202022;
line-height: 42rpx;
text-align: left;
font-style: normal;
margin-top: 20rpx;
}

.badge {
  height: 34rpx;
  background: linear-gradient( 270deg, #FFFFFF 0%, #EAD4B1 100%);
  border-radius: 6rpx;
  font-size: 24rpx;
  color: #9F918B;
  padding-left: 8rpx;
  margin-top: 34rpx;
  margin-left: 10rpx;
}

.card-subtitle {
  width: 100rpx;
  height: 36rpx;
  background: #F8F9F3;
  border-radius: 6rpx;
  font-weight: 400;
  text-align: center;
  line-height: 36rpx;
  font-size: 22rpx;
  color: #939688;
  margin-top: 16rpx;
  margin-bottom: 24rpx;
}

.price-info {
  display: flex;
  align-items: baseline;
}

.current-price {
	margin-right: 10rpx;
  ._text{
	  font-size: 24rpx;
	  color: #C19C55;
	  font-weight: 600;
  }
  .__text{
	  font-size: 44rpx;
	  color: #C19C55;
	  font-weight: 600;
  }
}

.original-price {
  font-size: 26rpx;
  color: #ccc;
  text-decoration: line-through;
}

.book-btn {
  background-color: #d2a45a;
  color: #fff;
  border-radius: 20rpx;
  padding: 10rpx 20rpx;
  font-size: 28rpx;
}
</style>